<template>
	<view class="merchant">
		<view class="input-box double-input flex-space-between">
			<view class="item">
				<!-- @confirm="search" -->
				<u-field :border-bottom="false" label-width="0" v-model="queryParams.serialnoStart" input-align="left"
					placeholder="SN号开始值">
					<!-- <text class="iconfont icon-saoma" slot="right" @click.stop="scanCode('start')"></text> -->
				</u-field>
			</view>
			<view class="item">
				<u-field :border-bottom="false" label-width="0" v-model="queryParams.serialnoEnd" input-align="left"
					placeholder="SN号结束值">
				</u-field>
			</view>
		</view>
		<u-button class="search-button" type="primary" hover-class="none" @click="search">搜索</u-button>
		<!-- <view class="merchant-seach">
			<u-search placeholder="请输入机具编号" v-model="queryParams.serialno" bg-color="#FFFFFF"
				:action-style="{color: '#4286F5'}" @custom="search"></u-search>
		</view> -->
		<view class="merchant-contain">
			<u-checkbox-group active-color="#4286F5" shape="circle" @change="checkboxGroupChange">
				<view class="item" v-for="(item,index) in list" :key="index">
					<u-checkbox active-color="#4888FB" @change="chagneActive" v-model="item.isActive"
						:name="item.serialno"></u-checkbox>
					<!-- <view class="item"> -->
					<view class="title">
						<view class="left">
							SN：{{item.serialno}}<i v-if="item.serialno"  class="iconfont icon-niantie" @click="$copy(item.serialno)"></i>
						</view>
						<view class="right button" @click="change(item.serialno)" v-if="item.bindStatus == 0">
							品牌修改
						</view>
					</view>
					<u-cell-group :border="false">
						<u-cell-item title="品牌名称" :arrow="false" :border-bottom="false">{{item.brandName}}</u-cell-item>
						<u-cell-item title="绑定状态" :arrow="false"
							:border-bottom="false">{{item.bindStatus == 0 ? '待绑定' : '已绑定'}}</u-cell-item>
						<!-- <block v-if="item.bindStatus!=0">
								<u-cell-item title="商户编号" :arrow="false" :border-bottom="false">{{item.mearchNo}}</u-cell-item>
								<u-cell-item title="商户名称" :arrow="false"
									:border-bottom="false">{{item.mearchName}}</u-cell-item>
								<u-cell-item title="活动名称" :arrow="false"
									:border-bottom="false">{{item.activeName}}</u-cell-item>
							</block> -->
						<u-cell-item title="直属代理商编号" :arrow="false"
							:border-bottom="false">{{item.agentNo}}</u-cell-item>
						<u-cell-item title="直属代理商名称" :arrow="false"
							:border-bottom="false">{{item.agentName}}</u-cell-item>
					</u-cell-group>
				</view>
				<!-- </view> -->
			</u-checkbox-group>
		</view>
		<div class="terminal-top-bottom">
			<div class="terminal-top-bottom-bar">
				<div class="terminal-top-bottom-item-all">
					<u-button class="add-all" size="small" shape="circle" :ripple="true" type="primary"
						@click="allCheckHandle">全部添加</u-button>
				</div>
				<div class="terminal-top-bottom-item-number">
					已选
					<span style="color: red">{{ selectCheckbox.length }}</span>
					台
				</div>

				<div class="terminal-top-bottom-item-btn">
					<u-button class="sure-btn" type="primary" :ripple="true"
						@click="issuedHandle">{{ '确认操作' }}</u-button>
				</div>
			</div>
		</div>
		<uni-load-more :status="loadMore"></uni-load-more>
		<u-select v-model="isTermShow" :list="termList" @confirm="termConfirm" label-name="brandName"
			value-name="brandCode" title="选择代理端修改终端所属品牌"></u-select>
	</view>
</template>

<script>
	import {
		brandList,
		canAssginList,
		editTermBrand
	} from '_a/terminal';
	import loadMoreData from "@/mixins/loadmore";
	export default {
		mixins: [loadMoreData],
		data() {
			return {
				list: [
					// {
					// 	sn: '502311175481551',
					// 	name: '电银',
					// 	status: 1,
					// 	mearchNo: '28394829820',
					// 	mearchName: '陈艳家用电器商店',
					// 	activeName: '2024版活动',
					// 	angenNo: 'LA009607',
					// 	angenName: '卢太宁',

					// }, {
					// 	sn: '502311175481551',
					// 	name: '电银',
					// 	status: 2,
					// 	mearchNo: '28394829820',
					// 	mearchName: '陈艳家用电器商店',
					// 	activeName: '2024版活动',
					// 	angenNo: 'LA009607',
					// 	angenName: '卢太宁',

					// },
				],
				queryParams: {
					// serialno: null,
					serialnoStart: null,
					serialnoEnd: null,
				},
				isTermShow: false,
				termList: [],
				serialno: '',
				selectCheckbox: [],
				type: 'one'
			}
		},
		onLoad() {
			this.getList();
			this.getbrandList();
		},
		methods: {
			getbrandList() {
				// brandStatus: 1
				let params = {
					pageNum: 1,
					pageSize: 200
				}
				brandList(params).then(res => {
					// this.termList = res.rows
					// this.termList = res.rows.filter(k=> k.brandCode!='20006' && k.brandCode!='20001')
					this.termList = res.rows.filter(item=> item.brandStatus == 1)
					this.termList = this.termList.filter(item => item.channelCode != "liaoyuan" && item.channelCode != "qiantu")
				})
			},
			getList() {
				let params = {
					pageNum: this.pageNum,
					pageSize: this.pageSize,
					...this.queryParams,
				};
				this.loadMoreStatusDeal([]);
				canAssginList(params).then(res => {
					this.total = res.total;
					let list = res.rows;
					this.loadMoreStatusDeal(list);
					if (list.length > 0) {
						this.list = this.list.concat(list);
					}
				})
			},
			reachBottomCallBack() {
				this.getList();
			},
			init() {
				this.$nextTick(() => {
					this.list = [];
					this.getList();
				});
			},
			// 搜索
			search(e) {
				// console.log({
				// 	e
				// })
				// this.queryParams.serialno = e;
				this.init();
			},
			change(serialno) {
				this.isTermShow = true;
				this.serialno = serialno;
				this.type = 'one';
				// this.$nav.push({
				// 	path: '/pages/home/merchantSupplement/changeInfo',
				// 	query: {
				// 		merchNo
				// 	},
				// });
			},
			termConfirm(e) {
				const {
					value,
					name
				} = {
					...e[0]
				}
				const params = {
					toBrandCode: value,
					serialno: this.serialno,
					type: 0
				}
				// return
				editTermBrand(params).then(res => {
					if (res.code === 200) {
						this.$tip.modal({
							content: '品牌修改成功！',
							showCancel: false
						});
						this.init();
						this.selectCheckbox = [];
						this.list.map(val => {
							val.isActive = false;
						})
					}
				})
			},
			chagneActive(item, index) {
				item.isActive = !item.isActive
				this.$forceUpdate();
			},
			checkboxGroupChange(v) {
				this.selectCheckbox = v;
			},
			allCheckHandle() {
				/** 全选 **/
				let arr = [];
				const list = this.list;
				let isAllSelect = list.every(item => item.isActive);
				if (isAllSelect) {
					return this.$tip.toast('已经全部添加了！');
				}
				if (list.length > 0) {
					this.list.map(item => {
						item.isActive = true;
						return item;
					});
					this.selectCheckbox = this.list.map(item => item.serialno);
				}
			},
			issuedHandle() {
				/** 确认操作 **/
				if (this.selectCheckbox.length == 0) {
					return this.$tip.toast('请选择操作机具');
				}
				this.isTermShow = true;
				this.serialno = this.selectCheckbox.join(',')
				this.type == 'all'
			}
		}
	}
</script>

<style lang="scss">
	.merchant {
		margin: R(30);

		.double-input {
			flex-wrap: wrap;
			align-items: center;

			.item {
				background: #fff;
				width: 48%;
				height: R(80);
				background: #ffffff;
				border-radius: R(10);
				margin-bottom: R(20);

				.icon-saoma {
					color: $themeColor;
				}
			}
		}

		&-seach {}

		&-contain {
			// background-color: #FFFFFF;
			// border-radius: R(10);
			// padding: R(20) R(30);
			// margin-top: R(30);

			.title {
				display: flex;
				justify-content: space-between;
				align-items: center;

				// color: #737373;
				.left {
					font-weight: bold;
					color: black;
				}

				.total {
					color: #4286F5;
				}
			}

			.item {
				background-color: #FFFFFF;
				border-radius: R(10);
				padding: R(20) R(30);
				// border-bottom: 1px solid #EEEEEE;
				margin: R(30) 0;
				width: 100%;


				.content {
					margin-bottom: R(20px);
				}

				.time {
					border-top: 1px solid #EEEEEE;
					color: #666666;
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-bottom: R(30);
					padding-top: R(20px);

					.left {
						display: flex;
						flex-direction: column;

						text {
							margin: R(10) 0;
						}
					}

				}

				&:last-child {
					border-bottom: 0;
				}
			}
		}

		.button {
			padding: R(10px) R(30px);
			border: #4286F5 1px solid;
			border-radius: R(10px);
			color: #4286F5;
		}
	}

	.u-cell {
		padding: R(10px) 0;
	}

	.terminal-top-bottom {
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 100;
		width: 100%;
		padding-bottom: env(safe-area-inset-bottom);
		background-color: #fff;
		-webkit-user-select: none;
		user-select: none;
	}

	.terminal-top-bottom-bar {
		display: -webkit-box;
		display: -webkit-flex;
		display: flex;
		-webkit-box-align: center;
		-webkit-align-items: center;
		align-items: center;
		-webkit-box-pack: end;
		height: R(104);
		font-size: R(28);

		.add-all {
			font-size: R(28);
			height: R(60);
			width: R(150);
		}

		.sure-btn {
			height: R(104);
		}
	}

	.terminal-top-bottom-item-all,
	.terminal-top-bottom-item-number,
	.terminal-top-bottom-item-look {
		flex: 1;
	}

	.terminal-top-bottom-item-look {
		color: #a5a5a5;
	}

	.u-checkbox-group {
		display: inline;
	}
</style>